<template>
	<movable-area class="movableArea" :style="{'--top': mp.menuTop + 'px','--menu-button-height':mp.menuButtonHeight + 'px'}"
		:class="{'can-swip-submit-l': iseEnsconce && x < 10,'can-swip-submit-r': iseEnsconce && x > 10}">
		<movable-view class="movableView" :x="x" :y="y" :direction="direction" :damping="damping" @change="onChange"
			@touchend="onTouchend" inertia :friction="9" @tap.stop.prevent="tapMovable">
			<slot />
		</movable-view>
	</movable-area>
</template>

<script>
	import mp from "@/mixins/mp.js";
	export default {
		mixins: [mp],
		data() {
			return {
				x: 320,
				y: 520,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			iseEnsconce: {
				type: Boolean,
				default: false
			},
			canSwip: {
				type: Boolean,
				default: false
			},
			isBuy: {
				type: [Number, String],
				default: 0
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x = res.windowWidth
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		methods: {
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log(this.x, this.y)
				}, 100)
			},
			tapMovable() {
				this.$emit('tapMovable')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movableArea {
		position: fixed;
		top: calc(var(--top) + var(--menu-button-height));
		left: 0;
		width: 100%;
		height: calc(100vh - var(--menu-button-height) - var(--top) - 130rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - var(--menu-button-height) - var(--top) - 130rpx - env(safe-area-inset-bottom));
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
		transition: all .5s;

		&.can-swip-submit-l {
			opacity: .4;
			left: -100rpx;
		}

		&.can-swip-submit-r {
			opacity: .4;
			left: 10vw;
		}

		.movableView {
			width: 136rpx;
			height: 140rpx;
			pointer-events: auto; //恢复鼠标事件



			@keyframes jump {
				0% {
					// transform: translateY(0px) scale(1);
					transform: translate(0, 0);
				}

				50% {
					// transform: translateY(-10px) scale(1.1);
					transform: translate(-3px, -3px);
				}

				100% {
					// transform: translateY(0px) scale(1);
					transform: translate(0, 0);
				}
			}

			@keyframes jump2 {
				0% {
					transform: translate(0, 0);
				}

				50% {
					transform: translate(3px, -3px);
				}

				100% {
					transform: translate(0, 0);
				}
			}

		}
	}
</style>